<template>
  <!--稿件管理-->
  <div class="wrapper">
    <!--表格-->
    <div v-show="table">
      <Table border stripe :columns="columns" :data="data"></Table>
      <!--Vue组件-->
      <div class="page" style="padding-top: 40px">
        <paging :all="all" @returnValue="returnValue"></paging>
      </div>
    </div>
    <!--公用-->
    <div v-show="details">
      <p style="font-size: 18px;background:rgba(0, 51, 153, 0.247058823529412);padding: 5px 10px">论文基本资料</p>
      <div class="add_style">
        <span>中文题目*:</span>
        <p>{{bus.cTitle}}</p>
      </div>
      <div class="add_style">
        <span>英文题目*:</span>
        <p>{{bus.eTitle}}</p>
      </div>
      <div class="add_style">
        <span>基金项目类型:</span>
        <p>{{bus.fundType}}</p>
      </div>
      <div class="add_style">
        <span>中文摘要*:</span>
        <p>{{bus.cAbstract}}</p>
      </div>
      <div class="add_style">
        <span>中文关键词*:</span>
        <p>{{bus.cKeys}}</p>
      </div>
      <div class="add_style">
        <span>英文摘要:</span>
        <p>{{bus.eAbstract}}</p>
      </div>
      <div class="add_style">
        <span>英文关键词:</span>
        <p>{{bus.eKeys}}</p>
      </div>
      <div>
        <div style="display: inline-block;float: left" class="add_style">
          <span>参考文献*:</span>
        </div>
        <div style="display: inline-block" class="add_style">
          <p style="display: block" v-for="(references,index) in bus.references">[{{index}}]{{references.content}}</p>
        </div>
      </div>
      <div class="add_style">
        <span>作者数量:</span>
        <p>{{bus.authorsNum}}</p>
      </div>
      <p style="font-size: 18px;background:rgba(0, 51, 153, 0.247058823529412);padding: 5px 10px">作者信息</p>
      <div class="add_style">
        <span>第一作者信息*</span>
      </div>
      <div class="add_style" v-for="authors in bus.authors">
        <div>
          <span>作者</span><span style="padding-right: 10px">{{authors.name}}</span>
          <span>作者手机</span><span style="padding-right: 10px">{{authors.phone}}</span>
          <span>邮箱</span><span style="padding-right: 10px">{{authors.mail}}</span>
        </div>
        <div>
          作者单位：<span>{{authors.unit}}</span>
        </div>
        <div>
          地址信息：<span>{{authors.addr}}</span>
        </div>
      </div>
      <p style="font-size: 18px;background:rgba(0, 51, 153, 0.247058823529412);padding: 5px 10px">稿件信息</p>
      <div class="add_style">
        <span style="display: inline-block;">{{bus.cTitle}}</span>
        <Button style="margin-left: 30px" type="primary" size="small" icon="ios-cloud-download-outline" @click="download(bus.uri)">下载</Button>
      </div>
      <div class="add_style">
        <Button type="primary" @click="back">返回</Button>
      </div>
    </div>

  </div>
</template>

<script>
  import paging from '../module/paging.vue';

  export default {
    components: {
      paging
    },
    data() {
      return {
        /*分页*/
        all: 1,
        cur: 1,
        /*查询url*/
        inquireurl: this.$api.url + '/thesis/selectAllThesis/',
        /*公用*/
        details: false,
        bus:{
          cTitle:'',
          eTitle:'',
          fundType:'',
          cAbstract:'',
          eAbstract:'',
          cKeys:'',
          eKeys:'',
          references:[],
          authorsNum:'',
          authors:[],
          uri:'',
        },
        /*表格*/
        table:true,
        columns: [
          {
            title: '编号',
            key: 'id',
            align: 'center',
            width: 80,
          },
          {
            title: '稿件名称',
            key: 'cTitle',
            align: 'center',
            width: 300,
          },
          {
            title: '投稿人',
            key: 'contributor',
            align: 'center',
          },
          {
            title: '投稿时间',
            key: 'deliverytime',
            align: 'center',
          },
          {
            title: '评估结果',
            key: 'matchingDegree',
            align: 'center',
          },
          {
            title: '状态',
            key: 'state',
            align: 'center',
            render:(h,params)=>{
              let condition = "";
              if(params.row.state == 0){
                condition="待查看";
              }
              if(params.row.state == 1){
                condition="已查看";
              }
              return h('span',{
              },condition)
            }
          },
          {
            title: '操作',
            key: '操作',
            width: 100,
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.show(params.index);
                    }
                  }
                }, '详情'),
              ]);
            }
          },
        ],
        data: [],
      }
    },
    mounted() {
      window.scrollTo(0,0);
      this.get(this.inquireurl, this.cur)
    },
    methods: {
      /*分页*/
      returnValue(data) {
        this.cur = data;
        this.get(this.inquireurl, this.cur)
      },
      /*详情*/
      show(index) {
        this.table = false;
        this.details = true;
        this.$axios.get(this.$api.url + '/thesis/selectParticularsById/' + this.data[index].id).then((res) => {
          this.bus.cTitle=res.data.cTitle;
          this.bus.eTitle=res.data.eTitle;
          this.bus.fundType=res.data.fundType;
          this.bus.cAbstract=res.data.cAbstract;
          this.bus.eAbstract=res.data.eAbstract;
          this.bus.cKeys=res.data.cKeys;
          this.bus.eKeys=res.data.eKeys;
          this.bus.references=res.data.references;
          this.bus.authorsNum=res.data.authorsNum;
          this.bus.authors=res.data.authors;
          this.bus.uri=res.data.uri;
        });
      },
      /*返回*/
      back(){
        this.table = true;
        this.details = false;
      },
      /*发布*/
      /*get请求*/
      get(url, cur) {
        this.$axios.get(url + cur).then((res) => {
          this.all = res.data.totalPage;
          let _this = this;
          _this.data = [];
          for (let i in res.data.lists) {
            let data = {
              id: res.data.lists[i].id,
              cTitle: res.data.lists[i].cTitle,
              contributor: res.data.lists[i].authors[0].name,
              deliverytime: res.data.lists[i].thesisDelivery.deliverytime,
              state: res.data.lists[i].thesisDelivery.state,
              matchingDegree: res.data.lists[i].thesisAssessmentResult.matchingDegree,
            };
            _this.data.push(data)
          }
        });
      },
      /*下载*/
      download(uri){
        window.open(uri)
      },
    },
  }
</script>

<style scoped>
  .wrapper {
    margin: 10px;
  }
  .add_style {
    padding-top: 10px;
  }
  .add_style > span {
    font-size: 14px;
    font-weight: bold;
    display: inline-block;
    width: 100px;
    text-align: right;
  }
  .add_style >p{
    font-size: 14px;
    display: inline-block;
  }
  .add_style >div{
    padding-left: 20px;
    font-size: 16px;
    margin: 5px 0;
  }
</style>
